<template>
<view class='container video'>
  <!-- 患者窗口 -->
  <image class='patients' src='/static/index_18.png'></image>
  <!-- 医生窗口 -->
  <image class='doctor' src='/static/index_14.png'></image>
  <!-- all 按钮 -->
  <view class='all_button'>
    <view  class='all_button_li' @tap='start_online'>
      <image src='/static/index_15.png'></image>
      <text>在线开方</text>
    </view>
    <view  class='all_button_li' @tap='start_text'>
      <image src='/static/index_16.png'></image>
      <text>文字沟通</text>
    </view>
    <view  class='all_button_li'>
      <image src='/static/index_17.png'></image>
      <text>结束问诊</text>
    </view>
  </view>
  <!-- 文字沟通弹出页面 -->
  <view class='video_text' v-if="video_text">
    <text class='title'>文字沟通</text>
    <text class='iconfont icon-guanbi1' @tap="start_shutdown"></text>
    <!-- 聊天内容 -->
    <view class='chat_text'>
      <view class='chat_li item-you'>
        <text>您好!</text>
        <image src='/static/index_14.png'></image>
      </view>
      <view class='chat_li item-me'>
        <image src='/static/index_14.png'></image>
        <text>你好医生，我的头疼，流鼻涕，四肢有些酸疼</text>
      </view>
      <view class='chat_li item-you'>
        <text>您好!</text>
        <image src='/static/index_14.png'></image>
      </view>
      <view class='chat_li item-me'>
        <image src='/static/index_14.png'></image>
        <text>你好医生，我的头疼，流鼻涕，四肢有些酸疼</text>
      </view>
      <view class='chat_li item-you'>
        <text>您好!</text>
        <image src='/static/index_14.png'></image>
      </view>
      <view class='chat_li item-me'>
        <image src='/static/index_14.png'></image>
        <text>你好医生，我的头疼，流鼻涕，四肢有些酸疼</text>
      </view>
    </view>
    <view class='chat_bot'>
      <input placeholder="您好！其他..." confirm-type="send" />
      <button>发送</button>
    </view>
  </view>
</view>

</template>

<script>
	export default {
		data() {
			return {
				isRuleTrue:true,
				tabbarIndex:1,
				video_text:false
			}
		},
		computed: {
 
		},
		methods:{
			start_shutdown() {
				this.isRuleTrue=false
				this.video_text=false
			},
			start_text(){
				this.video_text=true
			},
			//在线开方
			start_online(){
				uni.navigateTo({
					url: '../prescribing/prescribing'
				});
			}
			
			 
		}
	}
</script>

<style>
.container{
  height: 100vh;
}
.video{
  background: #333;
  position: relative
}
.video .patients{
  height: 100vh;
  width: 100%;
}
.video .doctor{
  height: 210upx;
  width: 160upx;
  position: absolute;
  top: 30upx;
  right:30upx;
}
.all_button{
  position: absolute;
  top: 500upx;
  right:30upx;
}
.all_button_li{
  background: rgba(0, 0, 0, 0.62);
  border-radius: 50%;
  height: 110upx;
  width: 110upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22upx;
  color: #fff;
  margin: 33upx 0;
  padding-top:10upx;
box-sizing:border-box;
}
.all_button_li image{
  height: 50upx;
  width: 50upx;
}
/* 弹出的文字聊天 */
.video_text{
  background: #fff;
  z-index: 99999;
  height: 650upx;
  border-top-left-radius: 20upx;
  border-top-right-radius: 20upx;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 20upx;
  box-sizing: border-box;
}
.video_text .title{
  text-align: center;
  display: inline-block;
  width: 90%;
  line-height: 60upx;
  color: #333333;
}
.video_text .iconfont{
  float: right;
  font-size: 48upx;
  color: #999999;
}
.video_text .chat_text{
  height: 450upx;
  overflow:auto;
}
.video_text .chat_text .chat_li{
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 26upx;
}
.video_text .chat_text .chat_li image{
  height: 110upx;
  width: 110upx;
  border-radius: 50%;
}
.video_text .chat_text .chat_li text{
  padding: 10upx;
  border-radius: 10upx;
  max-width: 400upx;
}
.video_text .chat_text .item-you{
  text-align: right;
  justify-content:flex-end;
}
.video_text .chat_text .item-you image{
  margin-left: 20upx;
}
.video_text .chat_text .item-you text{
  background: #b3e1f6;
}
.video_text .chat_text .item-me image{
  margin-right: 10upx;
}
.video_text .chat_text .item-me text{
  background: #f2f2f2
}
.chat_bot{
  display: flex;
  align-items: center;
  padding: 30upx;
  justify-content: space-between;
}
.chat_bot input{
  width: 70%;
  color: #666666;
  border: 1px solid #dce1eb;
  height: 68upx;
  border-radius: 10upx;
  padding: 0 10upx;
  box-sizing: border-box;
  font-size: 26upx;
}
.chat_bot button{
  font-size: 28upx;
  width: 160upx;
  line-height: 68upx;
  background: #108ec9;
  color: #fff;
}
</style>
